<template>
  <div>
    <el-main>
      <el-table
        ref="table"
        :data="tableData"
        :border="true"
        style="width: 100%"
        size="small"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="400"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="selected"
          label="是否是默认"
          :formatter="selectedFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          :formatter="statusFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sortIndex"
          label="排序"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="datetimeFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <el-link type="primary" :underline="false" icon="el-icon-edit" @click="handleUpdate(row)">编辑</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
      </div>
      <el-footer>
        <el-button
          icon="el-icon-close"
          size="small"
          @click="$router.go(-1)"
        >返回</el-button
        >
        <el-button type="primary"
                   icon="el-icon-unlock"
                   size="small"
                   @click="handleEnables"
        >启用
        </el-button
        >
        <el-button type="primary"
                   icon="el-icon-lock"
                   size="small"
                   @click="handleDisables"
        >禁用
        </el-button
        >
      </el-footer>
    </el-main>
  </div>
</template>

<script>
  import {enablesAddress,disablesAddress,searchAddress} from "@/api/member/address";
  import {Status} from "@/utils/constant/status";
  import {parseTime} from "@/utils/common";
  import {ApiError} from "@/utils/errors";

  export default {
    data() {
      return {
        Status,
        memberId: null,
        selection: [],
        searchModel: {},
        tableData: []
      }
    },
    created() {
      this.memberId = this.$route.query.id;
      this.search();
    },
    methods: {
      handleSelectionChange(selection){
        this.selection = selection;
      },
      handleUpdate(row) {
        this.$router.push({path: "member-address-update",query:{id:row.id}});
      },
      handleEnables() {
        const params = {
          ids: this.selection
        };
        enablesAddress(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            this.$message.success(`成功启用${res.data.data.count}个会员地址`);
            this.search();
          }
        });
      },
      handleDisables() {
        const params = {
          ids: this.selection
        };
        disablesAddress(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            this.$message.success(`成功禁用${res.data.data.count}个会员地址`);
            this.search();
          }
        });
      },
      search() {
        const params = {
          memberId: this.memberId
        };
        searchAddress(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            const data = res.data.data;
            this.tableData = data;
          }
        });
      },
      selectedFormatter(row) {
        if(row.selected){
          return '是';
        }else{
          return '否';
        }
      },
      statusFormatter(row) {
        return Status[row.status]["name"];
      },
      datetimeFormatter(row) {
        return parseTime(row["createTime"]);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/full-form";
  @import "@/styles/common-table";
</style>
